//首页学习应试组件
import React from 'react';
import  { Component } from 'react';
import "./index.css";
import BookSVG from "../../Common/svg/Book";
import CoursewareSVG from "../../Common/svg/Courseware";
import ExamSVG from "../../Common/svg/Exam";
import ItemBankSVG from "../../Common/svg/ItemBank";

export default class SVGInfoBox extends Component {
    constructor(props){
        super();
        this.state={
            title:props.title,
            msg:props.msg,
            msg2:props.msg2,
            img:props.img,

            isActive:props.isActive
        }
    }
    UNSAFE_componentWillReceiveProps(props){
        this.setState({
            title:props.title,
            msg:props.msg,
            msg2:props.msg2,
            img:props.img,

            isActive:props.isActive
        });
    }
 render(){
     let ico="";
     switch(this.state.img){
        case "Book":
            ico=(this.state.isActive?<BookSVG fill="white"/>:<BookSVG />);
            break;
        case "CoursewareSVG":
            ico=(this.state.isActive?<CoursewareSVG fill="white"/>:<CoursewareSVG />);
            break;    
        case "ItemBank":
            ico=(this.state.isActive?<ItemBankSVG fill="white"/>:<ItemBankSVG />);
            break; 
        case "Exam":
            ico=(this.state.isActive?<ExamSVG fill="white"/>:<ExamSVG />);
            break; 
        default:
            break;    
     }
     return(
         <div className={this.state.isActive?"SVGInfoBox SVGInfoBox_Active":"SVGInfoBox"}>
             <div className="SVGInfoBox_SVG">
                {ico}
             </div>
             <div  className={this.state.isActive?"SVGInfoBox_Info SVGInfoBox_Info_Active":"SVGInfoBox_Info"}>
                <div >
                    {this.state.title}
                </div>
                <div  className={this.state.isActive?"SVGInfoBox_Info_Desc SVGInfoBox_Info_Desc_Active":"SVGInfoBox_Info_Desc"}>
                    {this.state.msg}
                </div>
                <div className={this.state.isActive?"SVGInfoBox_Info_Desc SVGInfoBox_Info_Desc_Active":"SVGInfoBox_Info_Desc"}>
                    {this.state.msg2}
                </div>
             </div>
         </div>
     )
 }
}